<template>
  <el-card class="box-card">
    <el-tabs>
      <el-tab-pane label="试题录入">
        <el-form ref="formData" label-width="150px" :model="formData" :rules="rules">
          <el-form-item label="学科:" prop="subjectID">
            <el-select v-model="formData.subjectID" style="width:80%" placeholder="请选择">
              <el-option v-for="item in subjectLists" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select v-model="formData.catalogID" style="width:80%" placeholder="请选择">
              <el-option v-for="item in directorylist" :key="item.id" :label="item.directoryName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select v-model="formData.enterpriseID" style="width:80%" placeholder="请选择">
              <el-option v-for="item in companylist" :key="item.id" :label="item.company" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" style="width:83%" prop="province">
            <el-col :span="12">
              <el-select v-model="formData.province" style="width:100%" placeholder="请选择省份" @focus="getProvince" @change="getCities">
                <el-option v-for="(item,index) in provinces " :key="index" :label="item" :value="item" />
              </el-select>
            </el-col>
            <el-col :span="12">
              <el-select v-model="formData.city" style="width:100%" placeholder="请选择城市">
                <el-option v-for="item,index in cities " :key="index" :label="item" :value="item" />
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select v-model="formData.direction" style="width:80%" placeholder="请选择">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" prop="questionType">
            <el-radio-group v-model="formData.questionType">
              <el-radio :label="'1'">单选</el-radio>
              <el-radio :label="'2'">多选</el-radio>
              <el-radio :label="'3'">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="formData.difficulty">
              <el-radio :label="'1'">简单</el-radio>
              <el-radio :label="'2'">一般</el-radio>
              <el-radio :label="'3'">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干:" prop="question">
            <quill-editor
              ref="myQuillEditor"
              v-model="formData.question"
              :options="editorOption"
            />
          </el-form-item>
          <el-form-item v-if="formData.questionType!=='3'" v-model="formData.options" label="选项:">
            <radio v-if="formData.questionType==='1'" ref="radio" />
            <checkbox v-if="formData.questionType==='2'" ref="checkbox" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="formData.questionType!=='3'" type="danger" :disabled="formData.questionType!=='2'&&formData.difficulty!=='2'" @click="addinput">+增加选项与答案</el-button>
          </el-form-item>
          <el-form-item label="解析视频:">
            <el-input v-model="formData.videoURL" style="width:80%" />
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <quill-editor ref="QuillEditor" v-model="formData.answer" :options="editorOption" />
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input v-model="formData.remarks" type="textarea" style="width:40%" />
          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select v-model="formData.tags" style="width:40%" placeholder="请选择试题标签">
              <el-option v-for="item in taglists" :key="item.id" :label="item.tagName" :value="item.tagName" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button v-if="!this.$route.query.user" type="primary" @click="submitForm">确认提交</el-button>
            <el-button v-if="this.$route.query.user" type="success" @click="updafrom">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

    </el-tabs>
  </el-card>
</template>

<script>
import radio from '@/module-hmmm/components/radio.vue'
import checkbox from '@/module-hmmm/components/checkbox.vue'
import { subjectList } from '@/api/hmmm/questions'
import { list as directorys } from '@/api/hmmm/directorys'
import { list as companys } from '@/api/hmmm/companys'
import { list as taglist } from '@/api/hmmm/tags'
// 基础题库列表
import { list as questionlist, add, detail, update } from '@/api/hmmm/questions'
import { provinces, citys } from '@/api/hmmm/citys'
// 枚举数据
import { direction, questionType } from '@/api/hmmm/constants'
export default {
  name: 'Question',
  components: {
    radio,
    checkbox
  },
  data() {
    return {
      taglists: [], // 试题列表
      companylist: [], // 企业列表
      directorylist: [], // 目录列表
      subjectLists: [], // 学科列表数据
      data: {},
      content: null, // 富文本编辑器
      direction, // 方向枚举
      questionType, // 体型枚举数据
      provinces: [], // 地区枚举数据
      cities: [], // 地区的数据
      questionlists: [], // 基础题库列表
      formData: {
        subjectID: '', // 学科id
        catalogID: '', // 目录
        enterpriseID: '', // 企业
        province: '', // 企业所在省份
        city: '', // 企业所在城市
        direction: '', // 方向
        questionType: '1', // 试题类型
        difficulty: '1', // 难度
        question: '', // 题干
        options: {
          code: '', // 代码
          title: '', // 标题
          img: '', // 图片url
          isRight: ''// 是否正确答案
        },
        videoURL: '', // 解析视频
        answer: '', // 答案解析
        remarks: '', // 题目备注
        tags: '' // 标签名称

      },
      editorOption: {
        placeholder: '请在这里输入',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            ['blockquote', 'code-block'], // 引用，代码块
            [{ list: 'ordered' }, { list: 'bullet' }], // 列表
            ['image', 'video'] // 上传图片、上传视频
          ]
        }
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择地区', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        answer: [
          { required: true, message: '请输入答案解析', trigger: 'change' }
        ],
        question: [
          { required: true, message: '请输入提干', trigger: 'change' }
        ]
      }

    }
  },
  created() {
    this.questionlist()
    this.subjectList()
    this.directorys()
    this.taglist()
    this.companys()
    if (this.$route.query.user) {
      this.detail()
    }
  },
  methods: {
    async  taglist() {
      const res = await taglist()
      this.taglists = res.data.items
      console.log(res)
    },
    async  companys() {
      const res = await companys()
      this.companylist = res.data.items
    },
    // 目录列表
    async directorys() {
      const res = await directorys()
      this.directorylist = res.data.items
    },
    // 学科列表数据
    async  subjectList() {
      const res = await subjectList()
      this.subjectLists = res.data
    },
    // 点击增加选项与答案
    addinput() {
      this.$refs.checkbox.options.push(
        {
          code: 'E',
          title: '',
          img: '1',
          isRight: 'false'
        })
    },
    // 点击修改按钮提交
    async  updafrom() {
      await update({ id: this.$route.query.user, ...this.formData })
      this.$message.success('修改数据成功')
      this.$router.push('/questions/list')
    },
    // 基础题库详情
    async  detail() {
      const res = await detail({ id: this.$route.query.user })
      const { options } = res.data
      console.log(options)
      if (this.formData.questionType === '1') {
        this.radiolist(options)
      }
      if (this.formData.questionType === '2') {
        this.checkboxlist(options)
      }
      this.formData = res.data
    },
    radiolist(options) {
      const reslist = options.find(item => item.isRight === 1)
      this.$refs.radio.radio = reslist.code
      this.$refs.radio.options = options
    },
    checkboxlist(options) {
      const reslist = options.filter(item => item.isRight === 1)
      this.$refs.checkbox.checkList = reslist.map(item => item.code)
      this.$refs.checkbox.options = options
    },
    // 获取城市
    getProvince() {
      this.provinces = provinces()
      // console.log(this.provinces)
    },
    // 获取区域
    getCities() {
      this.cities = citys(this.formData.province)
    },
    // 基础学科列表
    async   questionlist() {
      const res = await questionlist()
      this.questionlists = res.data.items
    },
    submitForm() {
      this.$refs.formData.validate(async(valid) => {
        if (this.formData.questionType === '1') {
          this.formData.options = this.$refs.radio.shujuchuli()
        }
        if (this.formData.questionType === '2') {
          this.formData.options = this.$refs.checkbox.confirm()
        }
        if (valid) {
          await add(this.formData)
          this.$message.success('试题录入成功')
          this.$router.push('/questions/list')
        }
      })
    }

  }
}
</script>

<style scoped lang="scss">
.box-card {
  padding: 10px 30px;
  .tab-pane {
  padding: 20px 80px;
}
.quill-editor{
     height: 200px;
     margin-bottom: 50px;
  }
}
</style>
